<template>
	<view class="order-manage">
		<view class="top-bar">
			<button class="detail-btn" @click="goDetail(item)">
				<view>
					<image src="../../img/车联网服务商家端-08评价管理-已完成订单_slices/plane@3x.png" style="width: 40rpx;height: 40rpx;"
						mode="widthFix"></image>
				</view>
				<view>新增优惠卷</view>
			</button>
		</view>
		<view class="order-list">
			<view class="status">
				<view class="status-btn" :class="{ active: currentTab === 'ongoing' }"
					@click="handleTabClick('ongoing')">
					进行中
				</view>
				<view class="status-btn" :class="{ active: currentTab === 'ended' }" @click="handleTabClick('ended')">
					已结束
				</view>
			</view>
			<view>
				<view class="order-item" v-for="(item, index) in cardList" :key="index" v-if="currentTab=='ongoing'">
					<view class="order-left" v-if="item.type=='满减券'">
						<view class="order-id">满{{ item.triggerMoney }}可用</view>
						<view class="order-price">${{ item.preferentialMoney }}</view>
					</view>
					<view class="order-left" v-if="item.type=='折扣券'">
						<view class="order-id">满{{ item.triggerMoney }}可用</view>
						<view class="order-price">{{ item.discount *10}}折</view>
					</view>
					<view class="order-right">
						<view class="order-name">优惠卷名称: {{ item.name }}</view>
						<view class="order-date">优惠券有效期: {{ item.expirationStart }}-{{item.expirationEnd}}</view>
						<view class="order-date">发放有效期: {{ item.start }}-{{item.end}}</view>
						<view class="order-need">{{ item.cardneed }}</view>
					</view>
				</view>
				<view class="order-item1" v-for="(item, index) in cardList1" :key="index" v-if="currentTab!='ongoing'">
					<view class="order-left" v-if="item.type=='满减券'">
						<view class="order-id">满{{ item.triggerMoney }}可用</view>
						<view class="order-price">${{ item.preferentialMoney }}</view>
					</view>
					<view class="order-left" v-if="item.type=='折扣券'">
						<view class="order-id">满{{ item.triggerMoney }}可用</view>
						<view class="order-price">{{ item.discount *10}}折</view>
					</view>
					<view class="order-right">
						<view class="order-name">优惠卷名称: {{ item.name }}</view>
						<view class="order-date">优惠券有效期: {{ item.expirationStart }}-{{item.expirationEnd}}</view>
						<view class="order-date">发放有效期: {{ item.start }}-{{item.end}}</view>
						<view class="order-need">{{ item.cardneed }}</view>
					</view>
					<image
						src="../../img/车联网服务商家端-07卡券管理2_slices/1a7cdef7e44d372cd260a0483630ee26b37931b52ad2-qFaTDV.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		put
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				currentTab: 'ongoing',
				cardList: [{
						cardname: "新用户专享体验卷",
						cardstarttime: "2020.3.18",
						cardendtime: "2020.3.18",
						cardneedmoney: 200,
						cardreducemoney: 20,
						cardneed: "每人限领一张"
					},
					{
						cardname: "新用户专享体验卷",
						cardstarttime: "2020.3.18",
						cardendtime: "2020.3.18",
						cardneedmoney: 200,
						cardreducemoney: 20,
						cardneed: "每人限领一张"
					},
					{
						cardname: "新用户专享体验卷",
						cardstarttime: "2020.3.18",
						cardendtime: "2020.3.18",
						cardneedmoney: 200,
						cardreducemoney: 20,
						cardneed: "每人限领一张"
					}
				],
				cardList1: [{
						cardname: "新用户专享体验卷",
						cardstarttime: "2020.3.18",
						cardendtime: "2020.3.18",
						cardneedmoney: 200,
						cardreducemoney: 20,
						cardneed: "每人限领一张"
					},
					{
						cardname: "新用户专享体验卷",
						cardstarttime: "2020.3.18",
						cardendtime: "2020.3.18",
						cardneedmoney: 200,
						cardreducemoney: 20,
						cardneed: "每人限领一张"
					}
				]
			}
		},
		methods: {
			handleTabClick(tab) {
				// 点击时切换 currentTab 的值
				this.currentTab = tab;
			},
			goDetail() {
				uni.navigateTo({
					url: `/pages/GetCard/GetCard`,
				});
			}
		},
		async onLoad() {
			try {
				// 获取优惠券数据
				const res = await get('/dev-api/system/coupon/list/mid/' + uni.getStorageSync('merchant').id, {})
				console.log(res)
				// 获取当前时间（年月日，去除时分秒干扰）
				const today = new Date();
				today.setHours(0, 0, 0, 0); // 重置为当天0点

				// 分类处理
				this.cardList = []; // 进行中（未过期）
				this.cardList1 = []; // 已结束（过期）

				// 遍历所有优惠券
				res.forEach(coupon => {
					// 解析优惠券的过期时间
					const endDate = new Date(coupon.end);
					endDate.setHours(0, 0, 0, 0); // 统一时间格式

					// 比较过期时间与当前时间
					if (endDate >= today) {
						// 未过期，加入进行中列表
						this.cardList.push(coupon);
					} else {
						// 已过期，加入已结束列表
						this.cardList1.push(coupon);
					}
				});
			} catch (error) {
				console.error('获取优惠券失败:', error);
				uni.showToast({
					title: '获取数据失败',
					icon: 'none'
				});
			}
		}
	}
</script>

<style>
	.order-manage {
		background-color: #fff;
		min-height: 100vh;
		/*  padding: 10px; */
	}

	/* 顶部搜索及筛选 */
	.top-bar {
		padding: 10px;
		background-color: #2979ff;
		height: 300rpx;
	}

	.detail-btn {
		background-color: white;
		color: #fff;
		font-size: 14px;
		padding: 5px 10px;
		border-radius: 4px;
		color: blueviolet;
		border-radius: 40rpx;
		display: inline-flex;
		width: 700rpx;
		text-align: center;
		justify-content: center;
	}

	.order-list {
		margin-top: -80px;
		margin-left: 5%;
		margin-right: 5%;
		width: 90%;
		height: 800rpx;
		background-color: white;
		border-radius: 15rpx;
		padding-top: 30rpx;
	}

	.status {
		background-color: aqua;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40%;
		height: 60rpx;
		margin-left: 30%;
		margin-right: 30%;
		margin-bottom: 15rpx;
		border-radius: 50rpx;
	}

.order-item, .order-item1 {
    width: 92%;
    height: 250rpx; /* 统一高度 */
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: white;
    display: flex;
    position: relative; /* 新增：用于过期图片的定位 */
}

/* 仅保留已结束优惠券的特殊样式（灰色滤镜） */
.order-item1 {
    filter: grayscale(0.8);
}

/* 调整过期图片的定位，避免影响整体布局 */
.order-item1 image {
    position: absolute; /* 绝对定位，不占用文档流空间 */
    right: -20rpx; /* 向右微调，避免挤压内容 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    width: 180rpx;
    height: 180rpx;
    z-index: 1;
}

	.order-left {
		background-color: indianred;
		border-radius: 15rpx;
		height: 250rpx;
		width: 200rpx;
		color: white;
	}

	.order-id {
		font-size: 30rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.order-price {
		font-size: 80rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.order-right {
		background-color: lightyellow;
		width: 500rpx;
	}

	.order-name {
		margin-top: 40rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.order-date {
		margin-left: 20rpx;
	}

	.order-need {
		margin-left: 20rpx;
		margin-top: 50rpx;
	}

	.status-btn {
		flex: 1;
		text-align: center;
		padding: 10rpx 0;
		color: #007bff;
		background-color: #fff;
	}

	/* 激活状态的样式，这里模拟切换颜色 */
	.status-btn.active {
		background-color: #007bff;
		color: #fff;
	}
</style>